<style scoped>
    #container {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
    .my-panel {
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border-radius: .25rem;
        width: 10rem;
        height: 10rem;
        border-width: 0;
        border-radius: 0.4rem;
        box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
        position: fixed;
        bottom: 35rem;
        right: 22rem;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 0.75rem 1.25rem;
    }
    #panel {
        position: fixed;
        background-color: white;
        max-height: 90%;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        width: 280px;
    }
    #panel .amap-call {
        background-color: #009cf9;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    #panel .amap-lib-driving {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        overflow: hidden;
    }

    #locationList {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 200px;
        background-color: #ffffff;
        padding: 10px;
    }

    #locationList li {
        cursor: pointer;
        margin-bottom: 5px;
        border: 2px solid #000000;
        padding: 5px;
    }
</style>
<template>
    <div>
        <el-row :gutter="8" style="width: 100%; flex: 1">
            <el-col :span="3" :xs="24">
                <RegionTree ref="regionTreeRef" @node-click="nodeClick" />
            </el-col>
            <el-col :span="21" :xs="24" style="display: flex; flex-direction: column">
        <div id="container"> </div>
                <div id="panel"></div>
                <div >
                    <ul id="locationList"></ul>
                </div>
        <!--<div class="my-panel" id="my-panel"> -->
        <div class="add-btn-block">
            <div class="button" @click="initPathAssign">提交</div>
        </div>
            </el-col>
        </el-row>

    </div>
</template>
<script>
    import AMapLoader from "@amap/amap-jsapi-loader";
    import RegionTree from '/@/views/system/region/component/regionTree.vue';

    // 设置安全密钥
    window._AMapSecurityConfig = {
        securityJsCode: 'ff652b8278a970e68e67a0cd5e63d8d4',
    }
    export default {
        name: 'MapDragRoute',
        //import 引入的组件需要注入到对象中才能使用
        components: {
            RegionTree
        },
        props: {
            visible: Boolean,
            drewData: Array,
            routePathP: Array,
            districtP: String,
        },
        data() {
            //这里存放数据
            return {
                AMap: null,
                //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
                mapd: null,
                mouseTool: null,
                //监听draw事件可获取画好的覆盖物
                overlays: [],
                auto: null,
                placeSearch: null,
                drawOptionValue: '',
                //--地图控件 --
                toggleOverViewShowCheck: true,
                toggleControlBarCheck: true,
                toggleToolBarCheck: true,
                toggleScaleCheck: true,
                scale: null,
                toolBar: null,
                controlBar: null,
                overView: null,
                //坐击经纬度
                clickValue: '',
                //可拖拽路线规划
                route: null,
                routePath: [[116.303843, 39.983412],[116.321354, 39.896436],[117.321354, 39.896436],[116.321354, 39.196436],[116.407012, 39.992093]],
                startAndEnd: [],
                district: '',
                lnglat: '',
                path: [[102.886972, 24.955915], [103.166995, 24.788511]]
            };
        },
        //计算属性 类似于 data 概念
        computed: {
        },
        //监控 data 中的数据变化
        watch: {
        },
        //方法集合
        methods: {
            initPathAssign() {

                //构造路线导航类
                var driving = new AMap.Driving({
                    map: this.mapd,
                    panel: "panel"
                });
                // 根据起终点经纬度规划驾车导航路线
                driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) {
                    // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult

                });
                const ways = [
                    [116.379028, 39.865042],
                    [116.279028, 39.865042],
                    [116.374028, 39.865042],
                    [116.379028, 39.165042],

                ];
                // 封装 ways 数组，为每个元素添加额外的信息
                const wrappedWays = ways.map((way, index) => {
                    return {
                        position: way,
                        icon: new AMap.Icon({
                            size: new AMap.Size(200, 200),
                            image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
                            imageSize: new AMap.Size(32, 48)
                        }),
                        data: {
                            name: `永武高速公路 ${index + 1}`,  // 路段名称
                            index:`K ${2503 + index}`,
                            description:  `| 指标 | 值 |
| --- | --- |
| PCI | ${Math.floor(Math.random() * 5) + 95} |
| RQI | ${Math.floor(Math.random() * 5) + 95} |
| RDI | ${Math.floor(Math.random() * 5) + 95} |
| PBI | ${Math.floor(Math.random() * 5) + 93} |
| SRI | ${Math.floor(Math.random() * 5) + 90} |`
                            // 路段描述
                            // 可以根据需求添加更多的数据字段
                        }
                    };
                });

                //准备初始化列表
                //初始化桩号坐标
                const locationList = document.getElementById('locationList');
                const listItem1 = document.createElement('li');
                listItem1.textContent="杭州-瑞丽高速公路";
                locationList.appendChild(listItem1);

                // 在地图上显示标记
                wrappedWays.forEach((wrappedWay) => {
                    const marker = new AMap.Marker({
                        map: this.mapd,
                        position: wrappedWay.position,
                        icon: wrappedWay.icon
                    })

                    // 创建文本对象
                    const text = new AMap.Text({
                        map: this.mapd,
                        text: wrappedWay.data.name,
                        position: wrappedWay.position,
                        offset: new AMap.Pixel(20, -10),  // 文本偏移量，调整文本相对于标记的位置
                        style: {
                            color: '#333',  // 文本颜色
                            fontSize: '14px'  // 文本字体大小
                        }
                    });

                    // 创建信息窗体对象
                    const infoWindow = new AMap.InfoWindow({
                        content: `名称：${wrappedWay.data.name}<br>描述：${wrappedWay.data.description}`,  // 信息窗体内容
                        offset: new AMap.Pixel(0, -30)  // 信息窗体相对于标记的偏移量
                    });

                    // 添加标记点击事件监听
                    marker.on('click', () => {
                        infoWindow.open(this.mapd, marker.getPosition());
                    });
                    const listItem = document.createElement('li');
                    listItem.textContent = `桩号 K${wrappedWay.data.index }: `;
                    listItem.addEventListener('click', () => {
                        //定位到对应坐标点上
                        const coordinate = wrappedWay.position;
                        this.mapd.setCenter(coordinate);
                        infoWindow.open(this.mapd, marker.getPosition());
                    });
                    locationList.appendChild(listItem);

                });



            },
            initMap() {
                AMapLoader.load({
                    key: "de0ccfacaee224fb23e8954ea4cfb971",             // 申请好的Web端开发者Key，首次调用 load 时必填
                    version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    "plugins": [
                        "AMap.Scale",
                        "AMap.HawkEye",
                        "AMap.ToolBar",
                        "AMap.AutoComplete",
                        "AMap.PlaceSearch",
                        "AMap.ControlBar",
                        "AMap.MouseTool",
                        "AMap.DragRoute",
                        "AMap.Driving"],         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                }).then((AMap) => {
                    this.AMap = AMap
                    this.mapd = new AMap.Map("container", {  //设置地图容器id
                        viewMode: "2D",  //  是否为3D地图模式
                        zoom: 13,   // 初始化地图级别
                        //center: [102.892851, 24.897518], //中心点坐标  昆明
                        center: [116.397428, 39.90923],
                        resizeEnable: true
                    });



                    // 添加点击事件监听器
                    this.mapd.on('rightclick', (event) => {
                        // 获取点击位置的经纬度
                        this.lnglat = event.lnglat;
                        this.$emit('handleCoordinates', this.lnglat);

                    });
                    if (this.routePath !== null) {
                        //路径规划工具初始化
                        this.initPathAssign();
                    }
                    this.initPlaceSearch();
                }).catch(e => {
                    console.log(e);
                })
            },
            initPlaceSearch(AMap) {
                this.placeSearch = new AMap.PlaceSearch({
                    pageSize: 5, //单页显示结果条数
                    pageIndex: 1, //页码
                    // city: "010", //兴趣点城市
                    // citylimit: true, //是否强制限制在设置的城市内搜索
                    map: this.mapd, //展现结果的地图实例
                    panel: "my-panel", //结果列表将在此容器中进行展示。
                    autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
                });
                console.log(this.districtP)
                this.placeSearch.search(this.districtP);

            },
        },
        //生命周期 - 创建完成（可以访问当前 this 实例）
        created() {
        },
        //生命周期 - 挂载完成（可以访问 DOM 元素）
        mounted() {
            this.initMap();
        },
        //生命周期 - 创建之前
        beforeCreate() {
        },
        //生命周期 - 挂载之前
        beforeMount() {
        },
        //生命周期 - 更新之前
        beforeUpdate() {
        },
        //生命周期 - 更新之后
        updated() {
        },
        //生命周期 - 销毁之前
        beforeDestroy() {
        },
        //生命周期 - 销毁完成
        destroyed() {
        },
        //如果页面有 keep-alive 缓存功能， 这个函数会触发
        activated() {
        },
    }
</script>


